<template>
  <div class="material-right">
    <el-row type="flex" :gutter="10" class="picture-wrap">
      <el-scrollbar style="width:100%;height: 100%;">
        <el-col v-if="nodata" :span="24">暂无素材</el-col>
        <el-checkbox-group v-else v-model="checked" @change="changeChecked">
          <el-col v-for="(_item, index) in datas" :key="index" :xs="12" :sm="8" :md="8" :lg="8" :xl="6">
            <div class="picture-item">
              <el-row class="picture-top" type="flex">
                <div class="figure">
                  <el-image :src="pireviewIcon" class="pireview-icon" @click="pireview(_item)" />
                  <el-image v-if="materialType == 'audio'" :src="filecovers.audio" fit="none" />
                  <el-image v-else-if="materialType == 'video'" :src="_item.cover_url || filecovers.video" fit="none" />
                  <el-image v-else-if="materialType == 'file'" :src="filecovers.pdf" fit="none" />
                </div>
                <el-row type="flex" justify="space-between" class="picture-box">
                  <el-tooltip class="item" effect="dark" :content="_item.filename" placement="bottom-start">
                    <div class="name">
                      <el-link :underline="false" @click="setFilename(_item)"><i class="el-icon-edit-outline" /></el-link>
                      <div class="filename">{{ _item.filename }}</div>
                    </div>
                  </el-tooltip>
                  <el-row type="flex" align="middle" justify="space-between">
                    <div class="size">{{ _item.filesize }}</div>
                    <el-row v-if="materialType == 'video' || materialType == 'audio'" type="flex" align="middle">
                      <template>
                        <div class="time">{{ _item.duration_format }}</div>
                      </template>
                      <i v-if="permsDuration" class="el-icon-edit" @click="updateDuration(_item)" />
                    </el-row>
                  </el-row>
                </el-row>
              </el-row>
              <el-row type="flex" justify="space-between" class="info">
                <el-checkbox :label="_item.id" class="checkitem" />
                <div class="icon">
                  <!-- <el-link :underline="false" @click="setFilename(_item)"><i class="el-icon-edit-outline"></i></el-link> -->
                  <el-link v-if="permsDelete" :underline="false" @click="deleteMaterial(_item)"><i class="el-icon-delete-solid" /></el-link>
                </div>
              </el-row>
            </div>
          </el-col>
        </el-checkbox-group>
      </el-scrollbar>
      <div v-if="!nodata" class="operation-wrapper">
        <div class="operation-placeholder" />
        <div class="operation-fixed">
          <el-row type="flex" justify="space-between">
            <div class="operation-left">
              <el-checkbox v-model="checkedAll" :indeterminate="indeterminate" size="mini" type="text" @change="toggleSelection()">全选</el-checkbox>
              <el-button v-if="permsDelete" size="mini" plain @click="deleteSelected">批量删除</el-button>
              <el-button v-if="permsMove" size="mini" plain @click="moveSelected">移动到</el-button>
            </div>
            <div class="operation-right"><edu-pagination :loadpage="loadpage" :page-size="pageSize" /></div>
          </el-row>
        </div>
      </div>
    </el-row>
    <update-title v-if="visible" :visible.sync="visible" :item="item" @update:filename="$emit('update:filename', $event)" />
    <update-duration v-if="durationVisible" :visible.sync="durationVisible" :item="item" @update:duration="$emit('update:duration', $event)" />
    <select-category-box v-if="selectCategoryVisible" @submit="moveMasterial" @update:visible="selectCategoryVisible = false" />
    <el-dialog v-if="materialType == 'file'" width="1080px" top="10vh" :visible.sync="previewVisible" title="文件-预览" :close-on-click-modal="false">
      <preview-epub v-if="previewVisible && pireviewData.extension == 'epub'" :file="pireviewData"></preview-epub>
      <pireview-pdf v-if="previewVisible" :file="pireviewData" />
    </el-dialog>
    <el-dialog v-else-if="materialType == 'audio'" width="54%" :visible.sync="previewVisible" title="音频-预览" :close-on-click-modal="false">
      <pireview-audio v-if="previewVisible" :file="pireviewData" />
    </el-dialog>
    <el-dialog v-else-if="materialType == 'video'" width="70%" :visible.sync="previewVisible" title="视频-预览" :close-on-click-modal="false">
      <pireview-video v-if="previewVisible" :file="pireviewData" />
    </el-dialog>
  </div>
</template>

<script>
import AudioCover from '@/assets/material/audio.png';
import VideoCover from '@/assets/material/video.png';
import PdfCover from '@/assets/material/pdf.png';
import UpdateTitle from './update_title.vue';
import UpdateDuration from './update_duration.vue';
import EduPagination from '@public/template/page_list/pagination.vue';
import SelectCategoryBox from './select_category.vue';
import pireviewPdf from '../pireview/pdf';
import previewEpub from '../pireview/epub';
import pireviewAudio from '../pireview/audio';
import pireviewVideo from '../pireview/video';
import pireviewIcon from '@/assets/material/view.png';

export default {
  components: {
    UpdateTitle,
    EduPagination,
    SelectCategoryBox,
    UpdateDuration,
    pireviewPdf,
    previewEpub,
    pireviewAudio,
    pireviewVideo
  },
  props: {
    datas: {
      type: Array,
      require: true,
      default: _ => {
        return [];
      }
    },
    materialType: {
      type: String,
      require: true,
      default: ''
    },
    recycle: {
      type: Boolean,
      default: false
    },
    pageSize: {
      type: Array,
      default: () => {
        return [10, 20, 50, 100];
      }
    }
  },
  data() {
    return {
      pireviewIcon: pireviewIcon,
      checked: [],
      filecovers: {
        audio: AudioCover,
        video: VideoCover,
        pdf: PdfCover
      },
      checkedAll: false,
      visible: false,
      indeterminate: false,
      item: {},
      selectCategoryVisible: false,
      durationVisible: false,
      previewVisible: false,
      pireviewData: {}
    };
  },
  computed: {
    nodata() {
      return !this.datas || this.datas.length == 0;
    },
    permsDuration() {
      return this.hasPermission({
        permission: 'material.' + this.materialType + '.duration'
      });
    },
    permsDelete() {
      return this.hasPermission({
        permission: 'material.' + this.materialType + '.delete'
      });
    },
    permsMove() {
      return this.hasPermission({
        permission: 'material.' + this.materialType + '.move'
      });
    }
  },
  methods: {
    // 重命名
    setFilename: function(item) {
      this.visible = true;
      this.item = item;
    },
    // 更新时长
    updateDuration: function(item) {
      this.durationVisible = true;
      this.item = item;
    },
    // 删除
    deleteMaterial: function(item) {
      let txt = '确认移动到回收站吗';
      let uri = '/admin/material/' + item.id;
      if (this.recycle) {
        // 已经在回收站了
        txt = '删除后将无法找回素材，请谨慎操作';
        uri = '/admin/material/really/' + item.id;
      }
      this.$box
        .confirm(txt)
        .then(() => {
          this.$http.delete(
            uri,
            {},
            response => {
              this.$message.success(response.msg);
              this.$emit('reload');
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 选中改变
    changeChecked: function(checked) {
      const length = checked.length;
      if (length > 0) {
        if (length == this.datas.length) {
          this.checkedAll = true;
          this.indeterminate = false;
        } else {
          this.checkedAll = false;
          this.indeterminate = true;
        }
      } else {
        this.checkedAll = false;
        this.indeterminate = false;
      }
    },
    // 全选/反选
    toggleSelection: function() {
      if (this.checked.length != this.datas.length) {
        var checked = [];
        this.datas.map(function(item) {
          checked.push(item.id);
        });

        this.checked = checked;
      } else {
        this.checked = [];
      }
      this.changeChecked(this.checked);
    },
    // 批量删除
    deleteSelected: function() {
      if (this.checked.length == 0) {
        this.$message.warning('请选择要删除的素材');
        return false;
      }

      const ids = this.checked.join(',');
      let txt = '确认移动到回收站吗';
      let uri = '/admin/material/' + ids;
      if (this.recycle) {
        // 已经在回收站了
        txt = '删除后将无法找回素材，请谨慎操作';
        uri = '/admin/material/really/' + ids;
      }
      this.$box
        .confirm(txt)
        .then(() => {
          this.$http.delete(
            uri,
            {},
            response => {
              this.$message.success(response.msg);
              this.$emit('reload');
            },
            error => {
              this.$message.error(error.msg);
            }
          );
        })
        .catch(() => {});
    },
    // 控制移动弹出层
    moveSelected: function() {
      if (this.checked.length == 0) {
        this.$message.warning('请选择要移动的素材');
        return false;
      }
      this.selectCategoryVisible = true;
    },
    // 移动分组
    moveMasterial: function(category) {
      this.$http.post(
        '/admin/material/move',
        {
          id: this.checked,
          category: category
        },
        response => {
          this.$message.success(response.msg, _ => {
            this.selectCategoryVisible = false;
            this.checked = [];
            this.$emit('reload');
          });
        },
        error => {
          this.$message.error(error.msg);
        }
      );
    },
    loadpage: function() {
      this.$emit('reload');
    },
    pireview(file) {
      this.$http.get(
        '/admin/material/play/url',
        { attach_id: file.attach_id },
        response => {
          file.playurl = response.data.playurl;
          this.pireviewData = file;
          this.previewVisible = file;
        },
        _ => {}
      );
      // this.pireviewData = file;
      // this.previewVisible = file;
    }
  }
};
</script>
<style lang="scss" scoped>
.material-right {
  padding: 15px;
  flex: 1;
  margin-left: 15px;
  margin-right: 30px;
  border: 1px solid rgba(228, 231, 237, 1);
  .el-checkbox-group {
    width: 100%;
    ::v-deep.el-checkbox__input.is-checked + .el-checkbox__label {
      color: #606266;
    }
  }
  .picture-wrap {
    padding: 0 5px;
    flex-wrap: wrap;
    height: calc(100vh - 295px);
    .picture-item {
      border: 1px solid rgba(228, 231, 237, 1);
      margin-bottom: 12px;
    }
    .picture-box {
      flex: 1;
      flex-direction: column;
      margin-left: 10px;
      .name {
        height: 32px;
        color: #333333;
        font-size: 14px;
        display: flex;
        align-items: center;
        .filename {
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
        }
      }
      .size,
      .time {
        color: #909399;
        font-size: 12px;
      }
      .time {
        height: 28px;
        line-height: 28px;
      }
      .el-input {
        width: 80px;
      }
      .el-icon-edit {
        margin-left: 5px;
        font-size: 12px;
        cursor: pointer;
      }
    }
    .picture-top {
      padding: 10px;
    }
    .figure {
      width: 50px;
      height: 0;
      padding-top: 50px;
      position: relative;
      .el-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
        z-index: 1;
      }
      .pireview-icon {
        left: 6px;
        top: 6px;
        width: 38px;
        height: 38px;
        display: none;
      }
      &:hover {
        .pireview-icon {
          display: block;
          z-index: 2;
        }
      }
    }
    .info {
      padding: 5px 10px;
      background-color: #f7f7f7;
      .checkitem {
        ::v-deep .el-checkbox__label {
          display: none;
        }
      }
      .icon {
        .el-link {
          color: #909399;
          font-size: 16px;
        }
        .el-link + .el-link {
          margin-left: 15px;
        }
      }
    }
  }
}

.operation-wrapper {
  width: 100%;
  .operation-placeholder {
    height: 45px;
  }
  .operation-fixed {
    padding: 5px 30px 7px 20px;
    position: fixed;
    bottom: 0;
    left: 517px;
    right: 30px;
    z-index: 10;
    background-color: #fff;
    //border-top: 1px solid #e4e7ed;
    .operation-left {
      ::v-deep .el-checkbox {
        margin-right: 10px;
      }
    }
  }
}
.el-dialog__body {
  overflow: auto; /* 或者设置为hidden，根据你的需求 */
  padding: 0; /* 移除Element UI的内边距 */
}

/* 如果Element UI的样式中有这些类，可以在这里覆盖它们 */
.el-scrollbar__wrap {
  overflow: auto;
}

/* 如果你想要完全移除Element UI的加载动画效果，可以隐藏它 */
.el-loading-parent--relative {
  display: none;
}
</style>
